<template>
  <div>
    <div id="center">

      <!-- 版心 -->
      <div id="banx">

        <!-- 导航栏 -->
        <div id="yilou">
          <div class="classify">分类:</div>
          <div><a style="margin-left:100px" @click="now=0" :class="{active:now==0}" >推荐手办</a>
          <a @click="now=1" :class="{active:now==1}" >热门手办</a>
          <a @click="now=2" :class="{active:now==2}" >原神手办</a>
          <a @click="now=3" :class="{active:now==3}" >次元手办</a>
          <a @click="now=4" :class="{active:now==4}" >手办配饰</a>
        </div>
        <div class="filter-search">
          <input id="txt" type="text" class="search filter-text" placeholder="搜索商品">
          <span class="filter-search-btn"></span>
        </div>
        </div>

        <!-- 价格  销量栏 -->
        <div id="erlou">
          <div class="sort">排序:</div>
          <div class="cs11">
          <a id="xl_01" @click="now2=1" :class="{active:now2==1}" >销量</a>
          <a id="xp_01" @click="now2=2" :class="{active:now2==2}" >新品</a>

          <div id="jg_01">
            <!--  @sort-change="changeSort" -->
          <el-table @sort-change="changeSort">
          <el-table-column
            prop="price"
            label="价格"
            sortable
            width=120
            >
          </el-table-column>
        </el-table>
        </div>

          <!-- <a @click="now2=3" :class="{active:now2==3}" >价格</a>
          <i class="triangle "></i>
          <i class="triangle-top  "></i> -->
        </div>
        </div>

        <!-- 商品栏 -->
        <div id="sanlou">
          <div class="yiye" v-show="now==0" >
            <ul class="sp_01">
              <li v-for="itme in data.results" :key="itme.gid" @click="xq_01(itme.goods_id)">
                <div><img :src="itme.picture_address" alt=""></div>
                <div><p>{{itme.gname}}</p></div>
                <div><p class="tao">{{itme.address}}</p></div>
                <div><p>&yen;  </p><p class="price">{{itme.goods_price}}</p></div>
               </li>
            </ul>
          </div>
        </div>

        <!-- 底部分页 element-->
             <div class="paging">
             <el-pagination
                prev-text='上一页'
                next-text='下一页'
                @current-change="handleCurrentChange"
                :current-page="Number($route.query.page)"
                background
                layout="prev, pager, next,jumper"
                :total="rowcount*10">
             </el-pagination>
             </div>

      </div>
      
    </div>
    <my-fixed/>
  </div>
</template>

<script>
import MyFixed from '@/components/MyFixed.vue';
export default {
  components: { MyFixed },
  data() {
    return {
      now: '0',
      now2:'1',
      // 请求到的数据
      data:[],
      // 激活后 的样式
      color_01:'#ff6e6e',
      // 升序降序
      cs:'空',
      //默认显示第一页
      currentPage: 1,
      // 总页数
      rowcount:0,
    }
  },
  mounted () {
      // 获取到页面地址的页数
       let page=this.$route.query.page? this.$route.query.page :1 ;
      this.axios.get(`/goods?page=${page}`).then(res=>{
          console.log(res);
          this.data=res.data
          // 总页数赋给rowcount
          this.rowcount=res.data.pagecount
      })
     
      let color_01=this.color_01
      window.onload=function(){
       let jg_01=document.querySelector('.cell')
       let xp_01=document.getElementById('xp_01')
       let xl_01=document.getElementById('xl_01')  
      jg_01.onclick=function(){
          jg_01.style.color=color_01
          xp_01.style.color='#000'
          xl_01.style.color='#000'
      }
      xp_01.onclick=function(){
          jg_01.style.color='#000'
          xp_01.style.color=color_01
          xl_01.style.color='#000'
      }
      xl_01.onclick=function(){
          xl_01.style.color=color_01
          xp_01.style.color='#000'
          jg_01.style.color='#000'
      }
      // 点击后页面到顶部
       window.scrollTo(0,0)
    }
      
    
  },
  methods: {
       // 从后台获取数据,重新排序
    changeSort (val) {
    // console.log(val.order) // column: {…} order: "ascending" prop: "date"
    // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
    console.log(val.order);
    if(val.order=='ascending'){
       this.cs='上'
    }
    if(val.order=='descending'){
      this.cs='下'
    }
    if(val.order==null){
      this.cs='空'
    }
  },
  // 点击商品卡片跳转详情页
  xq_01(g_id){
    // console.log(g_id);
    // this.$router.push(`/details?goods_id=${g_id}`)
    let details =this.$router.resolve({
       path:`/details?goods_id=${g_id}`,
       query:{
         goods_id:g_id
     }
    })
    window.open(details.href, '_blank')
    // this.$router.push(`/details?goods_id=${g_id}`)
  },
  // element ui组件分页按钮点击事件
   handleCurrentChange(val) {
            this.currentPage = val;    //动态改变
            this.axios.get(`/goods?page=${this.currentPage}`).then(res=>{
                this.data=res.data
                // 当前页数赋给page
                // this.$store.commit('uPage', this.currentPage)
                // 点击后跳转相对于的页数的页面
                // console.log(this.currentPage);
                this.$router.push(`/goods?page=${this.currentPage}`)

                // 点击后页面到头部
                window.scrollTo(0,0)
            })
            }
 },
   watch: {
    cs(newValue, oldValue) {
      console.log("更新后：", newValue, "更新前：", oldValue);
    },
  },
};
</script>

<style lang="scss">
.el-table__body-wrapper{
  display: none;
}
.el-table .el-table__cell{
  padding: 0;
}
.el-table .cell{
  padding: 0;
  width: 60px;
}
.has-gutter>tr>th>.cell{
 margin: 0px;
 color: #000;
 font-size: 16px;
}
.el-table .ascending .sort-caret.ascending{
  border-bottom-color: #ff6e6e;
}
.el-table .descending .sort-caret.descending{
  border-top-color: #ff6e6e;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border: none;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: transparent;
}
.el-table th.el-table__cell>.cell{
  padding: 0;
  margin-top: -3px;
  height: 28px;
}
// 分页
.paging {
 >.el-pagination >.btn-prev>span , .el-pagination >.btn-next>span{
    width: 75px;
}
}
//分页修改鼠标滑过的颜色
.paging {

     >.el-pagination.is-background .el-pager li:hover {
    　　color: #ff6e6e;
    }
     >.el-pagination.is-background .el-pager li:not(.disabled):hover {
    　　color: #ff6e6e;
    }
     >.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    　　background-color: #ff6e6e;
    }
     >.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #ff6e6e;   // 进行修改背景
    }

}

</style>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
//分页
.paging{
    // padding: 15px 0;
    margin-bottom: 50px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    margin-left: 10px;
}
// 分页
.el-pagination button,  span{
width: 75px;
}
.el-pagination{
   width: 640px;
   margin: 0 auto;  
   font-weight: normal;
}
.cs11{
  display: flex;
  align-items: center;
}
#jg_01{
   margin-left: 60px;
}
#center{
  width:100%;
  user-select: none;
}

// 版心
#banx{
  width: 1200px;
  margin: 0 auto;
  // margin-bottom: 100px;
  margin-top: 50px;
}

// 导航栏
#banx #yilou{
  height: 46px;
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: white;
  box-shadow: 0 0 46px rgb(0 0 0 / 10%);
}


// 导航的分类的样式设置
#banx #yilou>.classify{
      width: 100px;
    position: absolute;
    font-size: 16px;
    color: grey;
    text-align: center;
    height: 44px;
    line-height: 44px;
}

// 导航栏的a标签样式设置
#banx #yilou>div>a{
    border-radius: 22px;
    width: 65px;
    height: 44px;
    padding-left: 26px;
    padding-right: 26px;
    display: inline-block;
    font-size: 16px;
    line-height: 44px;
    cursor: pointer;
}


#banx #yilou>div>a:hover{
  color: rgb(254,100,100);
}


// 导航栏的a标签激活样式
#banx #yilou>div>a.active{
    background-color: rgb(254,100,100);
    color: #fff;
}


// 导航栏的搜索
#banx #yilou>.filter-search>input {
    width: 260px;
    height: 32px;
    margin-right: 20px;
    line-height: 32px;
    border: 1px solid #e1e1e1;
    padding-left: 20px;
    border-radius: 17px 0 0 17px;
    outline: none;
     border-radius: 17px;
     position:absolute;
}

#banx #yilou>.filter-search{
  position: relative;
  display: flex;
  justify-content: end;
  margin-top: -36px;

}

// 导航栏的搜索logo
.filter-search-btn {
    top: 0;
    right: 0;
    margin-right: 20px;
    cursor: pointer;
    float: right;
    width: 60px;
    background: #e1e1e1 url('/public/img_hd/imgs-goods/ss.png') no-repeat 50%;
    position: absolute;
    height: 34px;
    border-radius: 17px;
    transition: 0.5s;
}
.filter-search-btn:hover{
   background: #ff6e6e url('/public/img_hd/imgs-goods/ss.png') no-repeat 50%;
}
// 价格 销量栏
// 价格 销量栏的排序css设置
#banx #erlou{
   display: flex;
  height: 46px;
  padding-bottom: 20px;
  padding-top: 30px;
  align-items: center;
}

// 价格 销量栏的排序的css设置
#banx #erlou>.sort{
    
    display: flex;
    font-size: 16px;
    color: grey;
    text-align: center;
    margin-left: 28px;

}
#banx #erlou>div:nth-child(2)>a{
   margin-left: 60px;
   cursor: pointer;
   user-select: none;
} 


// 价格 销量栏的a标签激活样式的设置
#banx #erlou>div>a.active{
    color: rgb(254,100,100);
}

.sp_01{
  display: flex;
  flex-wrap: wrap;
}
// 商品卡片样式
.sp_01>li{
    width: 224px;
    height: 315px;
    cursor: pointer;
    margin-right: 16px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    background-color: #fff;
    // background-color: lightblue;
    border-radius: 10px;
    box-shadow: 0 0 46px rgb(0 0 0 / 10%);
    transition: 0.5s;
}

// 商品图片
.sp_01>li>div:nth-child(1)>img{
  border-radius: 10px 10px 0 0;
  width: 224px;
  height: 224px;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 46px rgb(0 0 0 / 10%);
}

// 商品标题
.sp_01>li>div:nth-child(2)>p{
    width: 200px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: 700;
    color: #333;
    margin:12px auto;
    font-size: 14px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    text-align: center;
}

// 商品产地
.sp_01>li>div:nth-child(3)>p{
    text-align: center;
    width:38px;
    height: 18px;
    margin:12px 0 12px 12px;
    line-height: 17px;
    border: 1px solid #ff6e6e;
    border-radius: 2px;
    font-size: 13px;
    color: #ff6e6e;
}


// 商品价格
.sp_01>li>div:nth-child(4){
   display: flex;
   height: 18px;
  margin-left:12px;

}
.sp_01>li>div:nth-child(4)>p:nth-child(1){
  //  margin:12px 0 12px 12px;
  margin-top: 4px;
  margin-right: 3px;
  color: #ff6e6e;
  // line-height: 18;
  font-size: 14px;
}
.sp_01>li>div:nth-child(4)>p:nth-child(2){
    
    width:100px;
    font-size: 18px;
    font-weight: 400;
    color: #ff6e6e;
    font-weight: 700;
  
}
// 商品卡片悬停样式
#sanlou>.yiye>ul>li:hover{
    transform: translateY(-8px);
}


</style>